<template>
  <div class="w-full">
    <div class="text-title font-bold">推荐歌单</div>
    <div class="mt-4"></div>
    <div class="w-full md:w-[770px] md:mx-auto">
      <Swiper
        :pagination="{ enabled: true, el: '.swiper-pagination', bulletClass: 'swiper-pagination-bullet bg-red' }"
        :autoplay="{
          delay: 1800,
        }"
        :loop="true"
        direction="horizontal"
        :modules="modules"
        @swiper="setControlledSwiper"
      >
        <SwiperSlide v-for="(item, index) in list" :key="index">
          <a class="w-full aspect-[16/9] md:aspect-[16/9] relative overflow-hidden block px-2" :href="item.linkUrl">
            <img :src="item.imgUrl" class="w-full h-full object-cover rounded-lg" />
          </a>
        </SwiperSlide>
        <div class="swiper-pagination"></div>
      </Swiper>
    </div>
  </div>
</template>
<script setup lang="ts">
import * as api from "@/api/index-recommend";
import { ref } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay, Pagination, EffectCoverflow } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";

const modules = [Autoplay, Pagination, EffectCoverflow];
interface IList {
  id: number;
  title: string;
  linkUrl: string;
  imgUrl: string;
}
function setControlledSwiper(swiper) {
  swiper.update();
}
const list = ref<IList[]>([]);
api.list().then((res) => {
  list.value = res?.data as IList[];
});
</script>
<style scoped lang="less"></style>
